<template>
	<view class="home">
		<!-- 顶部的轮播 -->
		<swiper class="swiper" indicator-dots autoplay circular>
			<swiper-item v-for="(item, index) in dialogData.bannerArr" :key="index">
				<image class="img" :src="item.src" mode="scaleToFill" />
			</swiper-item>
		</swiper>
		<v-back v-show="dialogData.back"></v-back>
	</view>
	<fui-dialog :show="dialogData.visible" title="注意" content="还未登录请前往登录！" :buttons="dialogData.buttons"
		@click="onClick"></fui-dialog>
</template>

<script setup lang="ts">
	import { bannerCateList } from "@/mock/home";
	import { reactive } from "vue";
	import { onLoad, onPageScroll } from "@dcloudio/uni-app";
	const dialogData = reactive({
		back: false,
		bannerArr: [],
		visible: false,
		buttons: [{
			text: '确定',
			color: '#FF2B2B'
		}]
	})
	// 点击确认按钮
	const onClick = () => {
		console.log("去登录")
		uni.navigateTo({
			url: "/pages/login/index",
		});
	}
	onLoad(() => {
		const token = uni.getStorageSync("TOKEN");
		if (!token) {
			dialogData.visible = true
			return
		}
		getHomeData();
	});

	const getHomeData = async () => {
		dialogData.bannerArr = bannerCateList
	};

	//监听页面的滚动
	onPageScroll((event) => {
		if (event.scrollTop >= 200) {
			dialogData.back = true;
		} else {
			dialogData.back = false;
		}
	});
</script>

<style scoped>
	.home {
		width: 100%;
	}

	.home .swiper {
		width: 100%;
		height: 300rpx;
	}

	.home .swiper .img {
		width: 100%;
		height: 100%;
	}

	.home .study {
		display: flex;
		padding: 20rpx;
	}

	.home .study .item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.home .study .item .img {
		width: 72rpx;
		height: 72rpx;
	}

	.home .study .item .title {
		color: hotpink;
	}
</style>